<template>
  <div class="flex-container floor-wrapper">
    <div class="flex-item-1">
      <div class="avator-wrapper">
        <img class="avator-image"
             src="http://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?mowebapp&quality=80&size=b72_72&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&di=4d6dd909783f3dce7ba56a7b09448b83&wh_rate=null&src=http%3A%2F%2Ftb.himg.baidu.com%2Fsys%2Fportrait%2Fitem%2F95c6b6c0d7d4cbbcc4eea201%3Ft%3D1482670420.jpg">
      </div>
    </div>
    <div class="flex-item-4">
      <div class="user-info">
        <div class="inline-block user-info__name">{{floor.username}}</div>
        <div class="inline-block user-info__level">{{floor.level}}</div>
      </div>
      <div class="floor-info">
        <div class="inline-block floor-info__num">{{floor.floorNo}}楼</div>
        <div class="inline-block floor-info__date">{{floor.date}}</div>
      </div>
      <div class="floor-content">
        {{floor.content}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "floor",
    data() {
      return {}
    },
    props: ['floor'],
    methods: {}
  }
</script>

<style scoped>
  .floor-wrapper {
    padding: 10px 0;
  }

  .avator-wrapper {
    text-align: center;
  }

  .avator-image {
    width: 46px;
    height: 46px;
    border-radius: 23px;
  }

  .inline-block {
    display: inline-block;
  }

  .user-info, .floor-info {
    line-height: 23px;
  }

  .user-info__name {
    min-width: 100px;
    color: #3361A7;
  }

  .user-info__level {
    color: red;
  }

  .floor-info {
    color: #C5C9CD;
  }

  .floor-info__num {
    min-width: 100px;
  }

  .floor-content {
    padding-top: 5px;
    padding-right: 5px;
  }
</style>
